<template>
	<view>
		<!-- 注意子组件传入的值需要@tabTap监听事件 -->
		<view class="white-bj">
			<swiper-tab-hear :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap" scrollWidth="width:50%"></swiper-tab-hear>
		</view>
		<view class="uni-tab-bar" :style="{height:swiperHeight+'px'}" >
			<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)">
				<template v-if="list.length>0">
					<!-- 列表渲染 -->
					<view class="center border-r-30 white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing" v-for="(item,index) in list" :key="index" @tap="open(item)">
						<view class="a-center j-sp">
							<view class="black20-zt font-w-b font-28 text-overflow wid-60">{{item.content}}</view>
							<view class="a-center">
								<view class="font-24 activeColor" v-if="item.status==0">待处理</view>
								<view class="font-24 main-zt" v-if="item.status==1">已处理</view>
								<view class="icon-jinru mar-left10 black60-zt"></view>
							</view>
						</view>
						<view class="mar-top10">
							<view class="a-center mar-top30">
								<view class="icon-shijian activeColor font-24"></view>
								<view class="a-center font-24 black50-zt mar-left20">
									<view>反馈时间：</view>
									<view class="font-22">{{item.created_at|timeStanp}}</view>
								</view>
							</view>
							<view class="a-center mar-top30">
								<view class="icon-my yellow font-24"></view>
								<view class="a-center font-24 black50-zt mar-left20">
									<view>联系电话：</view>
									<view class="font-22">{{item.tel}}</view>
								</view>
							</view>
							<view class="a-top mar-top30">
								<view class="a-center">
									<view class="icon-position brown font-24"></view>
									<view class="font-24 line-h32 mar-left20 black50-zt">处理内容：</view>
								</view>
								<view class="black50-zt">
									<view class="font-22 line-h32 address text-overflow-2">{{item.remark}}</view>
								</view>
							</view>
						</view>
					</view>
						<!-- 上拉加载 -->
						<load-more :loadText="loadText"></load-more>
				</template>
				<template v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-26 black60-zt text-center">没有更多记录...</view>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import swiperTabHear from "@/pagesC/pages_com/swiper-tab-hear.vue";
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			swiperTabHear,
			loadMore
		},
		data() {
			return {
				tabIndex:0,
				swiperHeight:500,
				tabBars: [
					{name: '意见反馈', id: 0,type:'order'},
					{name: '反馈记录',id: 1,type:'fuwu'}, 
				],
				query:{mid:undefined,page:1,limit:10,aid:1},
				count:0,
				loadText:"上拉加载更多",
				list:[]
			}
		},
		onLoad(e) {
			this.tabIndex=parseFloat(e.index)
			this.query.mid=parseInt(this.$user.state.userId)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(200)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
		},
		onShow() {
			this.query.page=1
			this.list=[]
			this.getOrder()
		},
		filters:{
			
			timeStanp(dataTime){
				if (dataTime === undefined) { return ""}
				if(dataTime==0){return ""}
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			}
		},
		methods: {
			//预约
			open(Obj){
				uni.navigateTo({
					url:'/pagesC/opinion/opinionShow?id='+Obj.id
				})
			},
			//获取订单列表
			async getOrder(){
				await this.$api.GetOpinionList(this.query).then(res=>{
					
					this.list=[...this.list,...res.data.list]
					//计算是否还有
					let total_page=res.data.count/this.query.limit
					if(Number.isInteger(total_page)==true){
						total_page=total_page
					}else{
						total_page=Math.ceil(total_page)
					}
					if(this.query.page<total_page){
						this.loadText="上拉加载更多"
					}else{
						this.loadText="没有更多记录..."
					}
				})
			},
			//上拉加载事件
			async loadMore(index){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
				this.getOrder()
			},
			//tabbar点击切换事件
			tabTap(index,type){
				if(type=='order'){
					uni.redirectTo({
						url:'/pagesC/opinion/opinion?index=0'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.shop{
		border-radius: 25rpx;
		.logo{
			width: 45rpx;
			height: 45rpx;
		}
		.left{
			width: 175rpx;
			height: 175rpx;
		}
		.right{
			width: 480rpx;
		}
	}
	.nothing{
		position: absolute;
		top: 30%;
		bottom: 0;
		left: 0;
		right: 0;
		image{
			width: 40%;
			margin: auto;
		}
	}
	.address{
		width: 450rpx;
	}
</style>
